---
interface Props {
  refs: string[]
  title: string
  url: string
}

const { refs, title, url } = Astro.props
---

{
  refs.length ? (
    <p class="text-stone-700">
      {title}:
      {refs
        .map((ref) => (
          <a
            href={`${url}${ref}`}
            target="_blank"
            rel="noreferrer"
            class="font-medium underline transition-colors hover:text-stone-900 focus:ring-2 focus:ring-pink-500 focus:outline-0"
          >
            {ref}
          </a>
        ))
        .reduce((prev, current) => [prev, ', ', current])}
    </p>
  ) : null
}
